<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" class="mr-5" placeholder="请输入部门名称" v-model="deptName"></el-input>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button class="ml-5" type="warning" @click="reSet">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-button type="primary" plain @click="handleAdd(0)">
        <i class="el-icon-circle-plus-outline" style="margin-right: 5px"/>新增
      </el-button>
      <el-button type="info" plain icon="el-icon-sort" @click="toggleExpandAll">展开/折叠</el-button>
    </div>

    <el-table v-if="refreshTable" :data="tableData" border stripe :header-cell-class-name="headerBg"
              :default-expand-all="isExpandAll"
              row-key="deptId" @selection-change="handleSelectionChange">
      <el-table-column prop="deptId" label="部门编号"></el-table-column>
      <el-table-column prop="deptName" label="部门名称"></el-table-column>
      <el-table-column prop="leader" label="联系人"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column label="部门状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ccc"
                     @change="changeEnable(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="145"></el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="handleAdd(scope.row.deptId)">新增部门 <i class="el-icon-plus"></i>
          </el-button>
          <el-button type="success" plain class="el-icon-edit" @click="openEdit(scope.row)"> 修改</el-button>
          <el-button type="danger" plain class="el-icon-remove-outline" v-if="scope.row.parentId"
                     @click="handleRemove(scope.row.deptId)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form label-width="80px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门名称">
              <el-input v-model="from.deptName" placeholder="请输入部门名称" maxlength="30"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人">
              <el-input v-model="from.leader" placeholder="请输入联系人" maxlength="30"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="from.email" placeholder="请输入邮箱" maxlength="30"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码">
              <el-input v-model="from.phone" placeholder="请输入手机号码" maxlength="30"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="上级部门">
              <el-input v-model="from.parentId" :disabled="from.parentId === 0"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门顺序">
              <el-input-number v-model="from.orderNum" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="from.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Department",
  data() {
    return {
      tableData: [],
      roleIds: [],
      from: {},
      deptName: "",
      dialogFormVisible: false,
      // 是否展开，默认全部折叠
      isExpandAll: false,
      // 重新渲染表格状态
      refreshTable: true,
      headerBg: "headerBg",
      title: "",
      options: []
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      this.request.get("/sys-dept", {
        params: {
          deptName: this.deptName,
        }
      }).then(res => {
        if (res.code === 200) {
          this.tableData = res.data;
        }
      })

    },
    changeEnable(row) {
      this.request.post("/sys-dept/update", row).then(res => {
        if (res.code === 200) {
          this.$message.success("操作成功！");
        }
      })
    },
    submitForm() {
      this.request.post("/sys-dept", this.from).then(res => {
        this.dialogFormVisible = false;
        if (res.code === 200) {
          this.$message.success("保存成功");
          this.load();
        } else {
          this.$message.error("保存失败");
        }
      })
    },
    openEdit(row) {
      this.from = row;
      this.dialogFormVisible = true;
      this.title = "修改部门";
    },
    handleRemove(id) {
      this.$confirm('是否确认删除部门编号为"' + id + '"的数据项？').then(() => {
        this.request.delete("/sys-dept/" + id).then(res => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.load();
          } else {
            this.$message.error("删除失败");
          }
        })
      })
    },
    handleSelectionChange(val) {
      console.log(val);
      this.roleIds = val;
    },
    batchDelete() {
      let ids = this.roleIds.map(v => v.roleId);
      this.$confirm('是否确认删除这些部门数据？').then(() => {
        this.request.post("/sys-dept/batchDelete", ids).then(res => {
          if (res.code === 200) {
            this.$message.success("批量删除成功");
            this.load();
          } else {
            this.$message.error("删除失败");
          }
        })
      })
    },
    reSet() {
      this.deptName = "";
      this.load();
    },
    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    handleAdd(parentId) {
      this.dialogFormVisible = true;
      this.from = {};
      this.title = "添加部门";
      this.from.parentId = parentId;
    }
  }
}
</script>

<style>
.headerBg {
  background-color: #eee !important;
}
</style>
